<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看作业详情</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="bootstrap/jquery.3.2.1.min.js"></script>
    <script src="bootstrap/popper.12.5.min.js"></script>
    <script src="bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="layui/layer/layer.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="vue/axios.js"></script>
</head>
<body>
    <div id="app" class="container">
        <h3>{{paper.paperName}}</h3><br>
        <div v-if="questions!=null">
            <div v-for="(question,index) in questions">
                <div v-if="question.paperQuestionBank==1">
                    <div :style="titleClass()">
                        <label>{{question.paperQuestionNumber}}.</label>
                        <label>
                            {{question.paperDetailQuestion.selectTpoic}}( <label class="text-primary">{{question.paperDetailQuestion.selectAnswer}}</label>  )<br>
                        </label><br>
                        A. {{question.paperDetailQuestion.selectOptionsa}}<br>
                        B. {{question.paperDetailQuestion.selectOptionsb}}<br>
                        C. {{question.paperDetailQuestion.selectOptionsc}}<br>
                        D. {{question.paperDetailQuestion.selectOptionsd}}<br>
                    </div>
                    <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                    <div class="text-primary"><label>解析：</label><br>{{question.paperDetailQuestion.selectAnalyze}}</div>
                </div>
                <div v-if="question.paperQuestionBank==2" >
                    <div :style="titleClass()">
                        <label>{{question.paperQuestionNumber}}.</label>
                        <label>
                            {{question.paperDetailQuestion.vacancyTopic}}
                        </label>
                    </div>
                    <div class="text-info">
                        参考答案：{{question.paperDetailQuestion.vacancyAnswer}}
                    </div>
                    <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                    <div class="text-primary"><label>解析：</label><br>{{question.paperDetailQuestion.vacancyAnalyze}}</div>
                </div><br>
                <div v-if="question.paperQuestionBank==3">
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.materialReading}}
                    </label><br>
                    <div v-if="question.paperDetailQuestion.selectBanks!=null">
                        <div v-for="(select,index) in question.paperDetailQuestion.selectBanks">
                            <div :style="titleClass()">
                                <label>{{question.paperQuestionNumber}}.{{addMnum()}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                                <label>
                                    {{select.selectTpoic}}(    <label class="text-primary">{{select.selectAnswer}}</label>      )<br>
                                </label><br>
                                A. {{select.selectOptionsa}}<br>
                                B. {{select.selectOptionsb}}<br>
                                C. {{select.selectOptionsc}}<br>
                                D. {{select.selectOptionsd}}<br>
                            </div>
                            <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                            <div class="text-primary"><label>解析：</label><br>{{select.selectAnalyze}}</div>
                            <br>
                        </div><br>
                    </div>
                    <div v-if="question.paperDetailQuestion.vacancyBanks!=null">
                        <div v-for="vacancy in question.paperDetailQuestion.vacancyBanks">
                            <div :style="titleClass()">
                                <label>{{question.paperQuestionNumber}}.{{addMnum()}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                                <label>
                                    {{vacancy.vacancyTopic}}
                                </label>
                            </div>
                            <div class="text-info">
                                参考答案：{{vacancy.vacancyAnswer}}
                            </div>
                            <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                            <div class="text-primary"><label>解析：</label><br>{{vacancy.vacancyAnalyze}}</div>
                        </div><br>

                    </div>
                    <div v-if="question.paperDetailQuestion.judgeBanks!=null">
                        <div v-for="(judge,index) in question.paperDetailQuestion.judgeBanks">
                            <div :style="titleClass()">
                                <label>{{question.paperQuestionNumber}}.{{addMnum()}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                                <label>
                                    {{judge.judgeTopic}}
                                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                (
                                <label v-if="judge.judgeAnswer==1">&radic;</label>
                                <label v-if="judge.judgeAnswer==0">&times;</label>
                                )
                            </div>
                            <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                            <div class="text-primary"><label>解析：</label><br>{{judge.judgeAnalyze}}</div>

                        </div>
                    </div>
                    <label v-if="0==backMnum()"></label>
                </div><br>
                <div v-if="question.paperQuestionBank==4">
                    <label>
                        {{question.paperQuestionNumber}}({{question.paperDetailQuestion.clozePoint}}分).
                        {{question.paperDetailQuestion.clozeTopic}}<br>
                    </label>
                    <div v-for="(clozeSelect,index) in question.paperDetailQuestion.clozeSelects">

                        <div :style="titleClass()">
                           <label>{{question.paperQuestionNumber}}.{{index+1}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                           (&nbsp;&nbsp;<label class="text-primary">{{clozeSelect.clozeSelectAnswer}}</label> &nbsp;&nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;
                           A. {{clozeSelect.selectOptionsa}}&nbsp;&nbsp;&nbsp;&nbsp;
                           B. {{clozeSelect.selectOptionsb}}&nbsp;&nbsp;&nbsp;&nbsp;
                           C. {{clozeSelect.selectOptionsc}}&nbsp;&nbsp;&nbsp;&nbsp;
                           D. {{clozeSelect.selectOptionsd}}&nbsp;&nbsp;&nbsp;&nbsp;
                       </div>
                        <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                        <div class="text-primary"><label>解析：</label><br>{{clozeSelect.clozeSelectAnalyze}}</div><br>
                    </div>
                </div><br>
                <div v-if="question.paperQuestionBank==6">
                    <div :style="titleClass()">
                        <label>{{question.paperQuestionNumber}}.</label>
                        <label>
                            {{question.paperDetailQuestion.judgeTopic}}
                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        (
                        <label v-if="question.paperDetailQuestion.judgeAnswer==1">&radic;</label>
                        <label v-if="question.paperDetailQuestion.judgeAnswer==0">&times;</label>
                        )
                    </div>
                    <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>
                    <div class="text-primary"><label>解析：</label><br>{{question.paperDetailQuestion.judgeAnalyze}}</div><br>
                </div><br>
                <div v-if="question.paperQuestionBank==7">
                    <div :style="titleClass()">
                        <h6>{{question.paperQuestionNumber}}.作文，根据下列材料写作：</h6>
                        <label>
                            {{question.paperDetailQuestion.writerTopic}}
                        </label>
                    </div>
                    <textarea>
                    </textarea>
                    <div class="text-success">您的答案：{{answers[add()].replyAnswer}}</div>

                </div><br>
            </div>
        </div>
    </div>
<script>
    var anse = -1;
    var mnum = 0;
    var abc = new Vue({
        el:"#app",
        data:{
            questions:[],
            paper:"",
            answers: [],
        },
        methods:{
            titleClass:function(){
                if (this.answers[anse+1].replyPass){
                    return null;
                }
              return {color:"red"};
            },
            add:function(){
               anse += 1;
               return anse;
            },
            sub:function(){
                anse -= 1;
                console.log((anse))
                return anse;
            },
            addMnum:function () {
                mnum += 1;
                return mnum;
            },
            backMnum:function () {
                mnum = 0;
                console.log("backMnum");
                return mnum;
            }
        },
        mounted(){
            var paperid=localStorage.getItem("pid");
            var userid=localStorage.getItem("sid");
            let refreshToken = localStorage.getItem("refreshToken");
            let token=localStorage.getItem("token");
            console.log(paperid);
            axios.get("getAnswerSheet/"+paperid+"/"+userid,{
                headers:{
                    "token":token,
                    "refreshToken":refreshToken
                }
            }).then(
                res => {
                    if (res.data.code===0){
                        this.answers = res.data.data.sheetAnswers;
                        console.log(this.answers);
                    }else{
                        layer.alert("网络繁忙，请稍后再试");
                    }
                    axios.get("getPaper/"+paperid,{
                        headers:{
                            "token":token,
                            "refreshToken":refreshToken
                        }
                    }).then(
                        res => {

                            if (res.data.code===0){
                                abc.questions = res.data.data.paperQuestions;
                                abc.paper = res.data.data
                                console.log(abc.questions);
                            }else{
                                layer.alert("网络繁忙，请稍后再试");
                            }
                        }
                    );
                }
            );


        },
    })
</script>
</body>
</html>